import 'package:flutter/material.dart';

/* 在自身属性变化时自动执行动画过渡 */
class ContainerStatic extends StatefulWidget {
  const ContainerStatic({super.key});

  @override
  State<ContainerStatic> createState() => _ContainerStaticState();
}

class _ContainerStaticState extends State<ContainerStatic> {
  bool _isExpanded = false;
  
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 300,
      color: const Color.fromARGB(255, 243, 242, 239),
      child: Column(
        children: [
          const Text('-----AnimatedContainer----', style: TextStyle(fontWeight: FontWeight.bold),),
          ElevatedButton(
            onPressed: () {
              setState(() {
                _isExpanded = !_isExpanded;
              });
            },
            child: const Text('切换操作')
          ),

          AnimatedContainer(
            width: _isExpanded ? 200 : 100,
            height: _isExpanded ? 200 : 100,
            color: _isExpanded ? const Color.fromARGB(255, 160, 208, 247) : const Color.fromARGB(255, 242, 172, 172),
            alignment: _isExpanded ? Alignment.center : AlignmentDirectional.topCenter,
            duration: const Duration(seconds: 1),
            curve: Curves.fastOutSlowIn,
            child: const Text('动。。。')
          ),
        ],
      ),
    );
  }
}